.middle {
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

.middle > div {
    width: 1000px;
    border: 1px solid red;
}

.middle > div > div:nth-child(2) {
    padding: 10px;

}


.middle > div > div:nth-child(1) {
    border-bottom: 1px solid red;
}

/*--------------------------*/
.online {
    display: flex;
    flex-direction: column-reverse;
}

.online > div {
    display: flex;
    justify-content: center;
}

.online > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
    display: flex;
    justify-content: center;
}

.online > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div {
    display: flex;
    align-items: center;
}

.online > div > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(1) {
    color: orange;
    font-size: 20px;
}

.online > div > div:nth-child(1) > div:nth-child(1) > div > div:nth-child(2) {
    color: gray;
    font-size: 20px;

}

/*-------------------------------*/
.container {
    height: 500px;
    width: 800px;
    margin: 30px;
}